<style lang="less">
    @import '../../styles/common.less';
    @import '../tables/components/table.less';
</style>
<template>
    <div>
        <Form  :label-width="100" style="height: 38px;">
            <Input v-model="phone"   placeholder="请输入手机号" @on-click="search" style="width: 200px;margin-right: 3px;float: left"></Input>
            <div style="float: right">
            <Button type="info" style="float: right;margin-right: 5px" @click="search">查询</Button>
            </div>
        </Form>
        <Table :loading="loading" refs="table1"  :data="Message" :columns="columnsList"></Table>
        <Page :total="pageNum" :page-size="10"  style="text-align: center;margin-top: 15px;"  @on-change="pageChange"></Page>
    </div>
</template>
<script>
    import $http from '../../utils/axiosWrap'
    import canEditTable from '../tables/components/canEditTable.vue'
    export default {
        data() {
            return {
                phone: '',
                loading: true,
                Message:[],
                admin:true,
                columnsList: [
                    {
                        title: '序号',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return  params.index + (this.initPage- 1) * this.pageSize + 1
                        }
                    },
                    {
                        title: '订单ID',
                        align: 'center',
                        key: 'id',
                        editable: true
                    },
                    {
                        title: '委托价格',
                        align: 'center',
                        key: 'price',
                        editable: true
                    },
                    {
                        title: '委托数量',
                        align: 'center',
                        key: 'count',
                        editable: true
                    },
                    {
                        title: '可交易数量',
                        align: 'center',
                        key: 'tradableCount',
                        editable: true
                    },
                    {
                        title: '成交数量',
                        align: 'center',
                        key: 'trading',
                        editable: true
                    },
                    {
                        title: '总金额',
                        align: 'center',
                        key: 'totalPrice',
                        editable: true
                    },
                    {
                        title: '可交易金额',
                        align: 'center',
                        key: 'tradableMoney',
                        editable: true
                    },
                    {
                        title: '成交金额',
                        align: 'center',
                        key: 'tradedMoney',
                        editable: true
                    },
                    {
                        title: '委托时间',
                        align: 'center',
                        width: 160,
                        render: (h, params) => {
                            if(params.row.entrustTime){
                                return params.row.entrustTime.replace(/\T/g, ' ').substring(0,19)
                            }else{
                                return ''
                            }
                        }
                    },
                    {
                        title: '委托人名',
                        align: 'center',
                        key: 'entrusterName',
                        editable: true
                    },
                    {
                        title: '委托人电话',
                        align: 'center',
                        key: 'entrusterTelephone',
                        editable: true
                    },
                    {
                        title: '挂单类型',
                        align: 'center',
                        key: 'type',
                        editable: true
                    },
                    {
                        title: '挂单状态',
                        align: 'center',
                        key: 'status',
                        editable: true
                    }
                ],
                name: '',
                pageNum:0,
                initPage:1,
                pageSize:10
            }
        },
        created: function () {
            this.load()
        },
        methods: {
            pageChange(index){
                this.initPage = index
                this.loading = true
                this.load ()
            },
            load (){
                let _this = this
                let params = new URLSearchParams()
                params.append('pno', _this.initPage)
                params.append('type', '卖出')
                $http.post('/backgroundTradeTour/selectAllByType',params).then(function (res) {
                    if(res.suc){
                    _this.Message = res.result.list
                    _this.loading = false
                    _this.pageNum = res.result.totalRow
                }else{
                    if(res.msg == "请先登录"){
                        _this.$Message.error('请重新登录！');
                    }else{
                        _this.$Message.error(res.msg);
                    }
                }
                })
            },
            search(){
                let _this = this
                let params = new URLSearchParams()
                let url
                params.append('pno', '1')
                params.append('type', '卖出')
                if(_this.phone){
                    params.append('entrusterTelephone', _this.phone)
                    url = '/backgroundTradeTour/seekFindEntryOrders'
                }else{
                    url = '/backgroundTradeTour/selectAllByType'
                }
                $http.post(url,params).then(function (res) {
                    if(res.suc){
                    _this.Message = res.result.list
                    _this.loading = false
                    _this.pageNum = res.result.totalRow
                }else{
                    if(res.msg == "请先登录"){
                        _this.$Message.error('请重新登录！');
                    }else{
                        _this.$Message.error(res.msg);
                    }
                }
                })
            }
        }
    }
</script>
<style>
    .ivu-form-item {
        margin-bottom: 5px;
    }
</style>

